import React, { Component } from 'react'
import { NavBar  } from 'components'

export default class AccountMsg extends Component<any, any> {

    public state = {
        data: [
            {
                messageTime: '11:11',
                messageTitle: '恒豆到账通知',
                messageText: '您今天10:00兑换的5000恒豆已发放到您的恒豆账户，戳我查看明细~~'
            },
            {
                messageTime: '11:11',
                messageTitle: '恒豆到账通知',
                messageText: '您今天10:00兑换的5000恒豆已发放到您的恒豆账户，戳我查看明细~~'
            },
            {
                messageTime: '11:11',
                messageTitle: '恒豆到账通知',
                messageText: '您今天10:00兑换的5000恒豆已发放到您的恒豆账户，戳我查看明细~~'
            }
        ]
    }

    public render (): JSX.Element {
        const { data } = this.state
        return (
            <section className="accountMsg">
                <div className="accountMsg_placehoder">
                    <div className="accountMsg_top">
                        <NavBar 
                            title="账户通知"
                        />
                    </div>
                </div>
                {
                    data.map((item: any, index: number) => {
                        return (
                            <div className="accountMsg_content" key={index}>
                                <div className="accountMsg_content_card">
                                    <div className="accountMsg_content_card_timeWrap">
                                        <div className="accountMsg_content_card_time">{item.messageTime}</div>
                                    </div>
                                    <div className="accountMsg_content_card_container">
                                       <p className="accountMsg_content_card_container_title">{item.messageTitle}</p>
                                       <div>
                                        {item.messageText}
                                       </div>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }
            </section>
        )
    }
}